<script setup>
import { ref, onMounted } from 'vue'

import { useEquipmentStore } from '@/stores/equipment'

const equipmentStore = useEquipmentStore();

onMounted(()=>{
    equipmentStore.getEquipmentPage();
})

const currentChange = () => {
    equipmentStore.pageDTO.pageNum=equipmentStore.equipmentPage.pageNum;
    equipmentStore.getEquipmentPage();
}

</script>
<template>
    <div class="equipment-view">
        <el-row class="equipment-search">
            <el-col :span="24">
                <el-input v-model="equipmentStore.pageDTO.name" style="width: 240px" size="large" placeholder="请输入装备名称"
                    :suffix-icon="Search" />
                <el-button type="primary" style="margin-left: 10px;" @click="equipmentStore.getEquipmentPage()" round>搜索</el-button>

            </el-col>
        </el-row>
        <el-row class="equipment-list">
            <template v-for="item in equipmentStore.equipmentPage.datas">
                <equipment-item :equipmentName="item.name" :imgUrl="'/api/file/download/'+item.imgFileId"></equipment-item>
            </template>

        </el-row>
        <el-row class="equipment-page">
            <el-col :span="12">

            </el-col>
            <el-col :span="12">
                <el-pagination layout="prev, pager, next"  :page-size="equipmentStore.equipmentPage.pageSize" v-model:current-page="equipmentStore.equipmentPage.pageNum" :total="equipmentStore.equipmentPage.total" @current-change="currentChange()" />
            </el-col>
        </el-row>
    </div>
</template>
<style lang="less" scoped>
.equipment-view {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;

    .equipment-search {
        height: 50px;
    }

    .equipment-list {
        min-height: 500px;
        flex: 1;
    }

    .equipment-page {
        height: 50px;
    }
}
</style>